<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索的地址"
      show-action
      background="transparent"
    >
      <template #label>
        <router-link to="/diqu"
          ><span style="color: #000">上海</span><van-icon name="arrow-down"
        /></router-link>
      </template>
      <template #action
        ><van-icon name="location-o" size="20px" calor="#fff"
      /></template>
    </van-search>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="item in swiper"
        :key="item.id"
        :style="{
          backgroundImage:
            'url(' + 'http://liufusong.top:8080' + item.imgSrc + ')'
        }"
      ></van-swipe-item>
    </van-swipe>

    <van-grid :border="false">
      <van-grid-item icon="home-o" text="整租" style="color: #41c38d" />
      <van-grid-item icon="friends-o" text="合租" style="color: #41c38d" />
      <van-grid-item icon="location-o" text="地图找房" style="color: #41c38d" />
      <van-grid-item icon="wap-home-o" text="去出租" style="color: #41c38d" />
    </van-grid>
    <div class="main">
      <div class="title">
        <h3>租房小组</h3>
        <a href="#">更多</a>
      </div>

      <van-grid direction="horizontal" :column-num="2">
        <van-grid-item v-for="item in tenement" :key="item.id">
          <template #icon
            ><van-image
              :src="'http://liufusong.top:8080' + item.imgSrc"
            ></van-image>
          </template>
          <template #text>
            {{ item.title }} <br />
            {{ item.desc }}
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getSwiper, getTenement } from '@/api/article'
export default {
  name: 'article-page',
  components: {},
  props: {},
  async created() {
    const res = await getSwiper()
    console.log(res)
    this.swiper = res.data.body
    const res1 = await getTenement({ id: '杭州' })
    console.log(this.tenement)
    this.tenement = res1.data.body
  },
  data() {
    return {
      value: '',
      swiper: [],
      tenement: []
    }
  },
  computed: {},
  watch: {},
  // created() {},
  methods: {}
}
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  background-size: contain;
}
.my-swipe {
  width: 100%;
  height: 212px;
}
.van-search {
  position: absolute;
  z-index: 1;
  width: 100%;
}
::v-deep .van-nav-bar__text {
  color: #000;
  font-size: 16px;
  font-weight: 700;
}
.main {
  .title {
    margin: 10px 10px 10px 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    a {
      color: #000;
    }
  }
}
.van-image {
  width: 80px;
  margin-right: 7px;
}
</style>
